<template>
  <div class="container mx-auto" v-if="injectWidgetId === id">
    <el-form ref="formRef" :model="formData" label-position="top">
      <el-form-item label="模块名称" prop="modelLabel">
        <el-input v-model="formData.modelLabel" placeholder="字段名" @input="handleValueChange" />
      </el-form-item>
      <el-form-item label="模块值" prop="modelName">
        <el-input v-model="formData.modelName" placeholder="字段名" @input="handleValueChange" />
      </el-form-item>
      <el-form-item label="新增接口" prop="addApi">
        <el-input
          v-model="formData.addApi"
          type="textarea"
          placeholder="请输入"
          @input="handleValueChange"
        />
      </el-form-item>
      <el-form-item label="修改接口" prop="editApi">
        <el-input
          v-model="formData.editApi"
          type="textarea"
          placeholder="请输入"
          @input="handleValueChange"
        />
      </el-form-item>
      <el-form-item label="列表接口" prop="listApi">
        <el-input
          v-model="formData.listApi"
          type="textarea"
          placeholder="请输入"
          @input="handleValueChange"
        />
      </el-form-item>
      <el-form-item label="详情接口" prop="detailApi">
        <el-input
          v-model="formData.detailApi"
          type="textarea"
          placeholder="请输入"
          @input="handleValueChange"
        />
      </el-form-item>
      <el-form-item label="删除接口" prop="delApi">
        <el-input
          v-model="formData.delApi"
          type="textarea"
          placeholder="请输入"
          @input="handleValueChange"
        />
      </el-form-item>
      <el-form-item label="导出接口" prop="exportApi">
        <el-input
          v-model="formData.exportApi"
          type="textarea"
          placeholder="请输入"
          @input="handleValueChange"
        />
      </el-form-item>
      <el-form-item label="选择模版" prop="templateType">
        <el-select
          v-model="formData.templateType"
          placeholder="请选择模版"
          @change="handleValueChange"
        >
          <el-option value="1" label="资产系统模版"></el-option>
          <el-option value="2" label="生产过程系统模版"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup name="OproTableConfig">
import { ref, reactive, inject } from 'vue'
import { ElForm } from 'element-plus'
import cloneDeep from 'lodash/cloneDeep'

const props = defineProps({
  id: {
    type: String,
  },
  widget: {
    type: Object,
  },
})

const emits = defineEmits(['change'])

const injectWidgetId = ref(inject<String>('activeWidgetId'))

interface FormData {
  modelLabel: string
  modelName: string
  listApi: string
  detailApi: string
  delApi: string
  addApi: string
  editApi: string
  apiPath: string
  exportApi: string
  templateType: string
}

const formRef = ref<InstanceType<typeof ElForm>>()
const formData = reactive<FormData>({
  modelLabel: props.widget?.props.modelLabel || '',
  modelName: props.widget?.props.modelName || '',
  listApi: props.widget?.props.listApi || '',
  detailApi: props.widget?.props.detailApi || '',
  delApi: props.widget?.props.delApi || '',
  addApi: props.widget?.props.addApi || '',
  editApi: props.widget?.props.editApi || '',
  apiPath: props.widget?.props.apiPath || './service',
  exportApi: props.widget?.props.exportApi || '',
  templateType: props.widget?.props.templateType || '1',
})

function handleValueChange() {
  emits('change', cloneDeep(formData))
}
</script>

<style scoped>
.container {
  max-width: 600px;
}
</style>
